<script setup lang="ts" name="CCParentPage_RefsParent">
import { ref } from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";

const c1 = ref();
const c2 = ref();

const house = ref(4);

const changeC1Toy = () => {
  c1.value.changeToy("小猪配器");
};

const changeC2Phone = () => {
  c2.value.changePhone("诶破");
};

const addMoney = (children: { [key: string]: { money: number } }) => {
  for (let key in children) {
    children[key].money += 5;
  }
};

const decrementHouse = () => {
  if (house.value < 1) {
    throw new Error("造孽呀，一套都没了，还抢");
  }
  house.value -= 1;
};

defineExpose({ decrementHouse });
</script>

<template>
  <div class="bg-sky-100 p-6">
    <h2 class="text-xl">父组件</h2>
    <div>房产：{{ house }}</div>
    <div class="flex gap-x-2">
      <button class="border px-1 py-0.5 bg-gray-50" @click="changeC1Toy">
        修改子组件1的玩具
      </button>
      <button class="border px-1 py-0.5 bg-gray-50" @click="changeC2Phone">
        修改子组件2的手机
      </button>
      <button class="border px-1 py-0.5 bg-gray-50" @click="addMoney($refs)">
        给所有子组件增加5元零用
      </button>
    </div>
    <Child1 ref="c1" />
    <Child2 ref="c2" />
  </div>
</template>
